<template>
	<view class="price-view" v-if="item">
		<view class="container">
			<view class="img-name"  @tap="goDetils(item.id)">
				<image :src="item.morebagPublishPictures[0].picture" mode="aspectFit"></image>
				<view class="name">
					{{$t("goodsReleased.language") == "zh"?item.commodity:item.commodityEn}}
				</view>
			</view>

			<view class="price">
				<view class="col-date wid-sty1">
					<view class="title">
						{{$t("lookPrice.date")}}
					</view>
					<view class="content">
            <text v-for="item in dateList" :key="item.id">
              {{ dayjs(item.bidTime.split(' ')[0]).format('DD-MM-YYYY') }}
            </text>
					</view>
				</view>
				<view class="col-time wid-sty">
					<view class="title">
						{{$t("lookPrice.time")}}
					</view>
					<view class="content">
            <text v-for="item in dateList" :key="item.id">
              {{ item.bidTime.split(" ")[1].split(":").slice(0, 2).join(":") }}
            </text>
					</view>
				</view>
				<view class="col-price wid-sty">
					<view class="title">
						{{$t("lookPrice.price")}}
					</view>
					<view class="content c-price">
            <text :class="{self: item.userId == userId}" v-for="item in dateList" :key="item.id">
              {{ '$' + String(item.bid).replace(/\B(?=(\d{3})+(?!\d))/g, ',') }}
            </text>
					</view>
				</view>
				<view class="col-price wid-sty">
					<view class="title bor-none">
						{{$t("lookPrice.sellOut")}}
					</view>
					<view class="content bor-none" style="padding: 0 10rpx;">
						<text class="sell-out" v-if="index == 0" @tap="goOrder(item)" v-for="(item, index) in dateList" :key="item.id">{{$t("auctionButton.sale")}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getSellBid, getCommDetail } from "@/common/api.js"
  import dayjs from 'dayjs'
	export default {
		data() {
			return {
        dayjs,
				item: null,
				dateList: "",
				id: null
			}
		},
		methods: {
      // 跳转详情
      goDetils(id) {
        uni.navigateTo({
          url: `/pages/commodityDetails/commodityDetails?id=${id}`
        })
      },
			goSearch() {
				uni.navigateTo({
					url: "/pages/search/search"
				})
			},
			async initBidData() {
				const resComm = await getCommDetail(this.id);
				const res = await getSellBid({commodityId: this.id});

				console.log(res, resComm);
				this.item = resComm.data;
				res.rows.sort((a, b) => {
					return b.bid - a.bid;
				});
				this.dateList = res.rows;
			},
			goOrder(price) {
				uni.navigateTo({
					url: `/pages/confirmGoodsOrder/confirmGoodsOrder?flog=true&item=${encodeURIComponent(JSON.stringify(this.item))}&bid=${price.bid}&buyer=${encodeURIComponent(JSON.stringify(price))}`,
				})
			}
		},
		onReady() {
			uni.setNavigationBarTitle({ title: this.$t("lookPrice.title")});
		},
		onLoad(option) {
			this.id = option.id;
			this.initBidData();
		}
	}
</script>

<style>
	page {
		background-color: #FBFBFB;
	}
</style>
<style lang="scss" scoped>
	text {
		display: block;
		height: 65rpx;
	}

	.search-view {
		padding: 14rpx 22rpx;
		background-color: #fff;
	}

	.container {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}

	.img-name {
		height: 540rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		box-shadow: 0rpx 2rpx 16rpx 0rpx #0000000C;

		image {
			height: 400rpx;
			width: 100%;
		}

		.name {
			color: #000000;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			// width: 500rpx;
			text-align: left;
			margin-left: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 140rpx;
		}
	}

	.price {
		// height: 686rpx;
		background-color: #FBFBFB;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		display: flex;
		// align-items: center;
		overflow: hidden;
		box-shadow: 0rpx 2rpx 16rpx 0rpx #0000000C;
		padding-bottom: 50rpx;
		// align-items: center;

    .wid-sty {
      height: 586rpx;
      width: 23%;
      text-align: center;
      line-height: 100rpx;
    }
    .wid-sty1 {
      height: 586rpx;
      width: 31%;
      text-align: center;
      line-height: 100rpx;
    }

		.title {
			border-right: 2rpx solid #E8E8E8;
			border-bottom: 2rpx solid #E8E8E8;
		}

		.bor-none {
			border-right: none !important;
		}

		.content {
			height: 100%;
			border-right: 2rpx solid #E8E8E8;
			color: #000000;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;

			text {
				display: block;
				height: 50rpx;
				line-height: 50rpx;
				margin: 10rpx 0;
			}
		}

		.c-price {
			color: #FF0000;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
		}

		.sell-out {
			background-color: #FAAD67;
			color: #fff;
			border-radius: 20rpx;
		}
	}
</style>
